import { PureComponent, ChangeEvent, ReactNode, memo } from 'react'

interface Props {
  label?: string | ReactNode
  placeholder?: string
  value?: string
  action?: boolean
  maxLength?: number
  onChange?: (event: ChangeEvent<HTMLInputElement>) => void
  onFocus?: (param: boolean) => void
  onBlur?: (param: boolean) => void
  onClick?: () => void
}
interface State {
  value?: string
  action?: boolean
}

class Input extends PureComponent<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = {
      value: props.value || '',
      action: props.action || false
    }
  }
  handleChange(event: ChangeEvent<HTMLInputElement>) {
    this.setState({ value: event.target.value })
    if (this.props.onChange) {
      this.props.onChange(event)
    }
  }
  handleFocus(): void {
    this.setState({ action: true }, () => {
      if (this.props.onFocus) {
        this.props.onFocus(this.state.action || true)
      }
    })
  }
  handleBlur(): void {
    this.setState({ action: false }, () => {
      if (this.props.onFocus) {
        this.props.onFocus(this.state.action || false)
      }
    })
  }
  render() {
    const { label, placeholder, maxLength = 1000, onClick } = this.props
    const { value } = this.state
    return (
      <div
        className={
          'w-auto h-[42px] px-4 flex-1 flex items-center bg-base-plate rounded text-base text-primary-600 hover:shadow transition duration-100'
        }
        onClick={()=>onClick && onClick()}
      >
        {label && (
          <label className={'size-[42px] flex items-center '} htmlFor={'input'}>
            {label}
          </label>
        )}
        <input
          type={'text'}
          id={'input'}
          className={
            'w-full h-[36px] px-1 bg-transparent focus:text-primary-700 focus:caret-primary-600'
          }
          maxLength={maxLength}
          placeholder={placeholder}
          value={value}
          onChange={(e) => this.handleChange(e)}
          onFocus={() => this.handleFocus()}
          onBlur={() => this.handleBlur()}
        />
      </div>
    )
  }
}
export default memo(Input)
